<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/top.jsp" %>

<link rel="stylesheet" href="css/shop.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="jQuery.min.js"></script>
<style>
    @font-face {
        font-family: 'huayuan';
        src: url("font/花园肉丸.ttf");
    }
    @font-face {
        font-family: 'cm';
        src: url("font/Begilas.otf");
    }

    .display{
        height: fit-content;
    }

    table{
        line-height: 30px;
        width: 470px;
    }

    .ButtonNext{
        border: none;
        position: relative;
        left: 420px;
        top: 7px;
        color: rgb(190, 158, 111);
    }

    /*下拉列表默认只读*/
    .select-readonly{
        cursor: no-drop;
    }
    .select-readonly option{
        display: none;
    }

    /*确认编辑按钮*/
    .confirm-edit-btn{
        border-radius: 14px;
        border: none;
        background-color: antiquewhite;
        opacity: 80%;
        font-size: 15px;
        font-family: huayuan;
        color: rgb(244, 183, 103);
        cursor: pointer;
        display: none;
        float: right;
        margin-right: 5px;
        margin-top: 4px;
    }


</style>

<div class="display">
    <div id="Catalog">
        <form action="confirmOrderForm" method="post">

            <table>
                <tr>
                    <th colspan=2>Payment Details</th>
                </tr>
                <tr>
                    <td>Card Type:</td>
                    <td>
                        <select name="cardType" id="cardType" class="select-readonly">
                            <c:forEach items="${sessionScope.creditCardTypes}" var="cardType">
                                <option value="${cardType}">
                                        ${cardType}
                                </option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Card Number:</td>
                    <td>
                        <input type="text" name="creditCard" id="creditCard" value="${sessionScope.order.creditCard}" readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>Expiry Date (MM/YYYY):</td>
                    <td>
                        <input type="text" name="expiryDate" id="expiryDate" value="${sessionScope.order.expiryDate}" readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <th colspan=2>Billing Address</th>
                </tr>

                <tr>
                    <td>First name:</td>
                    <td>
                        <input type="text" id="firstName" name="firstName"
                               value="${sessionScope.order.billToFirstName}" readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td>
                        <input type="text" id="lastName" name="lastName" value="${sessionScope.order.billToLastName}" readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td>
                        <input type="text" id="address1" name="address1" value="${sessionScope.order.billAddress1}" readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td>
                        <input type="text" id="address2" name="address2" value="${sessionScope.order.billAddress2}" readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td>
                        <input type="text" id="city" name="city" value="${sessionScope.order.billCity}" readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td>
                        <input type="text" id="state" name="state" value="${sessionScope.order.billState}" readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td>
                        <input type="text" id="zip" name="zip" value="${sessionScope.order.billZip}" readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td>
                        <input type="text" id="country" name="country" value="${sessionScope.order.billCountry}" readonly="readonly">
                    </td>
                </tr>

                <tr>
                    <td colspan=2>
                        <input type="checkbox" name="editInformationRequired" id="editInformationRequired">
                        Edit different shipping information...
                        <button class="confirm-edit-btn" id="confirm-edit-btn">Confirm Edit</button>
                    </td>
                </tr>

            </table>

<%--            <input type="submit" class="Button" value="Continue">--%>
            <div id="draw-border">
                <button type="submit"  >NEXT→</button>
            </div>

        </form>
    </div>
</div>
<script src="js/newOrder.js"></script>




















